<template>
	<view class="ys">
		<y-header></y-header>
		<view class="userbody">
			<y-bread :name="pageName"></y-bread>
			<view class="usermain">
				<view class="left">
					<y-usermenu></y-usermenu>
				</view>
				<view class="right">
					<view class="select">
						<uni-data-select v-model="order_id" :localdata="orderRange"
							@change="changeType"></uni-data-select>
					</view>
					<movable-area>
						<movable-view :style="movableStyle" :x="x" :y="y" direction="all" :out-of-bounds="true"
							:scale="true" @change="onChange">
							<view class="dig-container" id="digBox">
								<view class="dig">
									<y-recursive @chooseItem="chooseItem" :list="treeData" />
								</view>
							</view>
						</movable-view>
					</movable-area>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		nodemap,
		getUserBall
	} from "@/api/user.js"
	export default {
		data() {
			return {
				pageName: this.$t('index.azt'),
				x: 0,
				y: 0,
				movableStyle: '',
				treeData: [],
				order_id: '',
				orderRange: [],
			}
		},
		async onReady() {


		},
		onLoad() {
			this.getUserBall()
		},
		methods: {
			getUserBall() {
				getUserBall().then(res => {
					if (res.code == 0) {
						this.orderRange = res.data
					}
				})
			},
			async changeType(e) {
				var that = this
				this.treeData = []
				if (this.order_id == '') {
					return false
				}
				let res = await nodemap({
					order_id: this.order_id
				})
				if (res.code == 0) {
					this.treeData = res.data
					setTimeout(() => {
						const query = uni.createSelectorQuery();
						//获取宽度
						query.select('#digBox').fields({
							size: true
						}, (res) => {
							const width = res.width;
							const height = res.height;
							that.movableStyle = 'width:' + width + 'px;height:' + height + 'px;'
							console.log(height);
						}).exec();
					})
				}
			},
			onChange(e) {},
			async chooseItem(item) {
				var that = this
				let res = await nodemap({
					order_id: item.label.selforder.id
				})
				if (res.code == 0) {
					this.treeData = res.data
					setTimeout(() => {
						const query = uni.createSelectorQuery();
						//获取宽度
						query.select('#digBox').fields({
							size: true
						}, (res) => {
							const width = res.width;
							const height = res.height;
							that.movableStyle = 'width:' + width + 'px;height:' + height + 'px;'
						}).exec();
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss">
	.userbody {
		max-width: 1180px;
		margin: 0 auto;
		margin-top: 20px;
		padding: 10px;
		box-sizing: border-box;
	}

	movable-area {
		width: 100%;
		min-height: 80vh;
		overflow: hidden;
	}


	.usermain {
		display: flex;
		justify-content: space-between;

		.left {
			box-sizing: border-box;
			width: 25%;
			max-width: 265px;
			margin-top: 20px;
			margin-bottom: 20px;
		}

		.right {
			box-sizing: border-box;
			width: 75%;
			padding-right: 1%;
			margin-top: 20px;
			margin-bottom: 20px;
		}
	}

	.dig-container {
		display: inline-block;
		padding: 15px;
		background-color: #fff;
		box-sizing: border-box;
	}

	.dig {
		display: table;
		text-align: center;
	}

	.dig:after,
	.dig:before {
		content: "";
		display: table;
	}

	.dig-node,
	.dig-node-children {
		position: relative;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	.dig>.dig-node {
		padding-top: 0;
	}

	.dig-node {
		padding-top: 20px;
		display: table-cell;
		vertical-align: top;
	}

	.dig:after {
		clear: both;
	}

	.dig-node-label {
		position: relative;
		background-color: #f1f1f1;
		display: inline-block;
	}

	.dig-node.collapsed,
	.dig-node.is-leaf {
		padding-left: 10px;
		padding-right: 10px;
	}

	.dig-node-children:before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 0;
		height: 20px;
		border-left: 1px solid #ddd;
	}

	.dig-node-children {
		padding-top: 20px;
		display: table;
	}

	.dig-node:after,
	.dig-node:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		height: 19px;
	}

	.dig-node:after {
		left: 50%;
		border-left: 1px solid #ddd;
	}

	.dig-node:not(:first-child):before,
	.dig-node:not(:last-child):after {
		border-top: 1px solid #ddd;
	}

	.dig-node-label-inner {
		padding: 10px 15px;
		box-shadow: 0 1px 5px #00000015;
	}

	.dig-node-label-info {
		min-width: 132px;
		height: 92px;
	}

	.dig-info-span {
		display: inline-block;
		margin-left: 10px;
	}

	.dig>.dig-node:after {
		border-left: 0;
	}

	@media (max-width:768px) {
		.usermain {
			.left {
				display: none;
			}

			.right {
				width: 100%;
				padding: 0;
			}
		}

		.orderbox .orderitem button {
			font-size: 12px;
		}
	}
</style>